import React from "react";
import { useSelector } from "react-redux";
import { Outlet } from "react-router-dom";
import { Layout } from "antd";
import CommonAside from "../components/commonAside";
import CommonHeader from "../components/commonHeader";
import CommonTag from "../components/commonTag";
import { RouterAuth } from "../router/routerAuth";

const { Content, Footer } = Layout;

const Main = () => {
  // 获取展开收起的状态
  const collapse = useSelector((state) => state.tab.isCollapse);

  return (
    <RouterAuth>
      <Layout className="main-container">
        <CommonAside collapse={collapse} />
        <Layout>
          <CommonHeader collapse={collapse} />
          <CommonTag />
          <Content
            style={{
              margin: "24px 16px 0",
            }}
          >
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: "#eee",
              }}
            >
              <Outlet />
            </div>
          </Content>
          <Footer
            style={{
              textAlign: "center",
            }}
          >
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </RouterAuth>
  );
};

export default Main;
